<template>
  <div class="main-article" element-loading-text="Efforts to generate PDF">
    <div ref="content" class="node-article-content"/>
    <iframe id="iframePreview" :src.sync="url" v-if="!video" width='100%' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com' >Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
    <video :src.sync="url" v-else controls="controls" width="100%">您的浏览器不支持 video 标签。</video>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Preview',
  data() {
    return {
      video: false,
      url: '',
      loading: {}
    }
  },
  props: {
    info: {
      type: Object,
      default: function () {
        return []
      }
    }
  },
  watch: {
    info: function(newsData) {
      this.setPreviewData(newsData)
    }
  },
  created() {
    this.setPreviewData(this.info)
  },
  mounted() {
    let that = this
    if(!document.getElementById("iframePreview"))return
    document.getElementById("iframePreview").addEventListener("load", function() {
      that.loading.close()
    });
  },
  methods: {
    setPreviewData: function(newsData) {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading'
      })
      switch (newsData.extension) {
        case 'pdf':
          this.video = false
          this.url = newsData.file + '?r=' + new Date().getTime()
          break
        case 'mp4':
          this.url = newsData.file + '?r=' + new Date().getTime()
          this.video = true
          this.loading.close()
          break
        case 'docx':
        case 'doc':
        case 'ppt':
        case 'pptx':
        default:
          this.video = false
          this.url = 'https://view.officeapps.live.com/op/embed.aspx?src=' + newsData.file + '&r=' + new Date().getTime()
          break
      }
    }
  }

}

</script>

